{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/css/payment.css" />
<style>
    .van-key{
        width: 100%;
    }
    .van-password-input__security i{
        margin: 0;
    }
</style>
<script type="text/javascript">
    var orderTotal = 0,shippingFee = 0,bonus_money = 0,totalGoodsPrice=0,used_bonus_id = 0;
</script>
{/block}
{block name='pageType'}payment{/block}
{block name="main" }
{assign name="isAddOrder" value="1"}
<div id="app2">
    <van-popup v-model="show" position="bottom" :style="{ height: '55%' }" :overlay="false">
        <!-- 密码输入框 -->
        <van-password-input style="margin-top: 20px" :length="6" info="请输入支付密码" :value="value" :focused="showKeyboard" @focus="showKeyboard = true"></van-password-input>
        <!-- 数字键盘 -->
        <van-number-keyboard v-model="value" :show="showKeyboard" @blur="show = false" ></van-number-keyboard>
    </van-popup>
</div>
<div class="page-bd" >
    <!-- 收货地址-->
    {include file="flow/address" /}
    <!-- 购物车 -->
    <div class="goodslist" style="padding-bottom:0px;">
        <div class="title fs32 color_3 fw_b">商品信息</div>
        <div class="goodsList">
           <div style="line-height: 100px; text-align: center">数据加载中..</div>
        </div>
        <div class="inputBox bor_t">
            <span class="fs28 color_3">留言</span><input type="text" placeholder="请输入" class="fs26 color_3" id="buyMsg"><p class="fs28 color_9 num" id="wordNum">0/140</p>
        </div>
    </div>
    <div class="cellBox">
        <div class="color_3 cell">
            <span class="fs28">商品金额</span>
            <div class="color_3 fs28 num money"><p class="fw_b fm_p">￥</p><em class="fs34 totalGoodsPrice">0.00</em></div>
        </div>
        <div class="color_3 cell">
            <span class="fs28">折扣</span>
            <div class="color_3 fs28 num money"><p class="fw_b fm_p">-￥</p><em class="fs34 totalDiscount">0.00</em></div>
        </div>
        <!-- 优惠券 -->
        <!-- {eq name="$setting.shop_used_bonus" value="1"}
        {include file="flow/bonus" /}
        {/eq} -->
        <div class="color_3 cell">

            <span class="yunfeiname">运费</span>
            <!-- <span class="yunfeiname">综合费用</span> -->
            <div class="color_3 fs28 num money"><p class="fw_b fm_p">￥</p><em class="fs34 shippingFee">0.00</em></div>
        </div>
        <div class="color_3 cell use_integral hide">
            <span class="fs28">星券：</span>
            <div class="color_3 fs28 num money"><p class="fw_b fm_p"></p><em class="fs34 integralTotal"></em></div>
        </div>
        <div class="flex-center">
            <input type="checkbox" class="ckecbox mr-1" id="agreenment">
            <a href="{:url('shop/goods/shopregment')}" class="color--red font-sm">同意 《购买协议》 电子协议</a>
        </div>
    </div>
</div>

<div class="paymentbox">
    <div class="left"><span class="fs28 color_9">实付</span>
        <div class="color_3 fs30 num money payTotal"><p class="fw_b fm_p">￥</p><em class="fs52">00</em><span>.00</span></div>
        <span class="color_9 fs28 num money use_integral hide"> + 星券<i class="color_3 fs52 integralTotal"></i></span>
    </div>
    <div class="gopay fs28 fw_b color_w BGcolor_r">立即支付</div>
</div>
<!-- 支付方式 -->
<div class="model">
    <div class="modelContent">
        <div class="closeBox"><img src="__STATIC__/mobile/default/images/close_icon.png" alt=""></div>
        <div class="title fs36 color_3 fw_b">请选择支付方式</div>
        <div class="cantre pay" id="payListBox">

                <p class="get_list_tip">加载中...</p>

        </div>
        <!--<div class="uploading">-->
            <!--<div class="title fs28 fw_b color_3">上传凭证</div>-->
            <!--<div class="uploadBox">-->

                <!--<div class="Box">-->
                    <!--<img src="__STATIC__/mobile/default/images/addImg.png" alt="" class="imgBox">-->
                    <!--<input type="file" class="uploadInput" onchange="uploadFile(this,event)">-->

                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <div class="buttBox">
            <span class="fs32 fw_b color_w BGcolor_r ">确认支付</span>
        </div>
    </div>
</div>
<script type="text/html" id="goodsListTpl">
    {{each goodsList as item index}}
        <div class="checkbox">
            <a href="{:_url("shop/goods/info",["id"=>"[[item.goods_id]]"])}" >
            <img src="{{item.pic}}" alt="" class="goodsimg">
            </a>
            {literal}
            <div class="info">
                <p class="fs28 color_3">{{item.goods_name}}</p>
                <div class="sign fs28 color_9">{{item.sku_name}}</div>
                <div class="Money">
                    <div class="left">
                        <div class="color_3 fs24 num"><p class="fw_b fm_p">￥</p><em class="fs36">{{item.exp_price[0]}}</em><p>.{{item.exp_price[1]}}</p></div>
                        {{if item.use_integral > 0}}
                            <p class="fw_b fm_p"> + </p><em class="fs36">{{item.use_integral}}</em>星券
                        {{else}}
                            <span class="fs24 color_9">￥{{item.market_price}}</span>
                        {{/if}}
                    </div>
                    <div class="number">
                        <img src="__STATIC__/mobile/default/images/goodsIcon05.png" onClick="editNum(this,'{{item.rec_id}}','down');" class="minus">
                        <input class="fs30 color_3" type="text" readonly value="{{item.goods_number}}">
                        <img src="__STATIC__/mobile/default/images/goodsIcon06.png" onClick="editNum(this,'{{item.rec_id}}','up');" class="add"></div>
                </div>
            </div>
            {/literal}
        </div>
    {{/each}}
 </script>
{literal}
<script type="text/html" id="payListTpl">
    {{each data as item index}}
    <div class="block">
        <label for="{{item.pay_code}}" style="width: 100%;">
        <div class="payType">
            <img src="__STATIC__/mobile/default/images/{{item.img}}" alt="111">
            <div>
                <span class="fs30 color_3">{{item.pay_name}}</span>
                {{if item.pay_code == 'balance'}}
                <span class="fs26 color_r">(￥{{balance_money}})</span>
                {{/if}}
            </div>
        </div>
        </label>
        <label for="{{item.pay_code}}">
            <div class="iconBox">
                {{if item.pay_code == 'balance'}}
                    <input type="radio" class="check" name="pay_id" value="{{item.pay_id}}" id="{{item.pay_code}}" checked>
                {{/if}}
                {{if item.pay_code != 'balance'}}
                    <input type="radio" class="check" name="pay_id" value="{{item.pay_id}}" id="{{item.pay_code}}" >
                {{/if}}                
                <i class="icon_checked"></i>
            </div>
        </label>
    </div>
    {{/each}}
</script>
{/literal}
{/block}
{block name="footer"}

<div class="wrapper bonusListBox">
<div class="page">
    <div class="page-hd">
        <div class="header bor-1px-b">
            <div class="header-left">
                <a href="javascript:;" class="left-arrow close_wrapper" data-type="list"></a>
            </div>
            <!-- <div class="header-title">优惠券</div> -->
            <div class="header-right"></div>
        </div>
    </div>
    {include file="bonus/list" /}
 	</div>   
</div>


<script>
    var app2 = new Vue({
      el: '#app2',
      data: {
          show: false,
          value: '',
          showKeyboard: true,
          arr: {}
      },
      watch: {
        value(value) {
          if (value.length === 6 ) {
            this.arr.password = value
            jq_ajax('{:url("shop/api.flow/addOrder")}',this.arr,function(res){
                if (res.code==0){
                    _alert(res.msg);
                    return false;
                }
                window.location.href = '{:_url("done",["order_id"=>"【res.order_id】","type"=>"add"])}';
            })
          } else {

          }
        },
      },
    })
    console.log('app',app)
</script>
<script>
	var rec_id = '{$rec_id}';
    var agreenmentChecked = false
    //购物车统一请求
    function evalCart(action,arr){ 
	 	arr += "&is_sel=1";      
		if (rec_id != ''){
			 arr += "&recids="+rec_id;
		}
        jq_ajax('{:url("shop/api.flow/'+action+'")}',arr,function(res){
            if (res.code==0){
                if (res.msg != '') _alert(res.msg);
                return false;
            }
			if (action == 'getList'){
				if (res.cartInfo.allGoodsNum < 1){
					_alert('请选择需购买的商品.','{:url("shop/index/index")}');
					return false;
				}
			}
            $('.goodsList').html(template('goodsListTpl',res.cartInfo));
            $('.totalGoodsPrice').html(res.cartInfo.totalGoodsPrice);
            $('.totalDiscount').html(res.cartInfo.totalDiscount);
            if (res.cartInfo.integralTotal > 0){

                $('.use_integral').removeClass('hide');
                $('.integralTotal').html(res.cartInfo.integralTotal);
                $('.yunfeiname').html('综合费用');
            }
            orderTotal = res.cartInfo.orderTotal;
            totalGoodsPrice = res.cartInfo.totalGoodsPrice;
            if (action == 'editNum') {
                shippingFee = res.shippingFee.shipping_fee;
                used_bonus_id = 0;
                $('.bonusInfo .ticket').show();
                $('.bonusInfo .usdinfo').html('')
                getBonusList();
            }
            evalPrice();
            return true;
        })
    }
    //计算支付金额
    function evalPrice(){
        var payTotal = parseFloat(orderTotal) + parseFloat(shippingFee) - parseFloat(bonus_money);
        payTotal = payTotal.toFixed(2);
        payTotal = payTotal.split(".");
        $('.payTotal').find('em').html(payTotal[0]);
        $('.payTotal').find('span').html('.'+payTotal[1]);
        $('.shippingFee').html(shippingFee);

    }
    //修改购物车订购数量
    function editNum(obj,recid,type) {
        var num = $(obj).parent().find('input').val();
        if (type == 'up'){
            num++;
        }else {
            num--;
        }
        if (num < 1) return false;
        var address_id = $('#address_id').val();		
        return evalCart('editNum','rec_id='+recid+'&num='+num+'&address_id='+address_id+'&recids='+rec_id);
    }
    evalCart('getList');//获取购买商品列表
    $(function(){
        // $('.uploading').hide();
        // $(document).on('click',".check",function(){
        //     $('.uploading').hide();
        //     if ($("input[name='pay_id']:checked").val() == 3) {
        //         $('.uploading').show()
        //     }
        // })
        $('#agreenment').on('change', function () {
                agreenmentChecked = this.checked;
        });
        countTxtEvent("buyMsg","wordNum",140);
        //选择支付方式
        $('.gopay').on('click',function(){
            if (!agreenmentChecked) {
                $utils.showMsg('请同意 《购买协议》 电子协议');
                return false;
            }
            jq_ajax('{:url("publics/api.pay/getList")}','',function(res){
                if (res.code==0){
                    _alert(res.msg);
                    return false;
                }
                $('#payListBox').html(template('payListTpl',res));
                $('.model').show();
            });
        });
        $('.closeBox').on('click',function(){
            $('.model').hide();
        });
        //下单
        $('.buttBox span').on('click',function(){
            var arr = new Object();
            arr.used_bonus_id = used_bonus_id;
            arr.buy_msg = $('#buyMsg').val();
            arr.address_id = $('#address_id').val();
            if (arr.address_id < 1){
                _alert('请设置收货地址后，再操作.');
                return false;
            }
            arr.pay_id = $("input[name='pay_id']:checked").val();
            if (typeof(arr.pay_id) == 'undefined' || arr.pay_id < 1){
                _alert('请选择支付方式.');
                return false;
            }
			if (rec_id != ''){
				 arr.recids = rec_id;
			}
			app2.show = true
			app2.arr = arr
            // jq_ajax('{:url("shop/api.flow/addOrder")}',arr,function(res){
            //     if (res.code==0){
            //         _alert(res.msg);
            //         return false;
            //     }
            //     window.location.href = '{:_url("done",["order_id"=>"【res.order_id】","type"=>"add"])}';
            // })
        })
    })
</script>
{/block}